<template>
  <div>
    <!-- 上面俩东西 -->
    <div class="bigBox">
      <el-row>
        <el-col :span="12"><div class="left">
          <div>日销售统计</div>
          <el-row class="ri">
            <el-col :span="6">
              <div>{{ dateTime1.total }}</div>
              <span>当日销售量(个)</span>
            </el-col>
            <el-col :span="6">
              <div>{{ dateTime1.completedTotal }}</div>
              <span>当日销售量(个)</span>
            </el-col>
            <el-col :span="6">
              <div>{{ dateTime1.cancelTotal }}</div>
              <span>当日销售量(个)</span>
            </el-col>
            <el-col :span="6">
              <div>{{ dateTime1.workerCount }}</div>
              <span>当日销售量(个)</span>
            </el-col>
          </el-row>
        </div></el-col>
        <el-col :span="12"><div class="right">
          <div>月销售统计</div>
          <el-row class="yue">
            <el-col :span="6">
              <div>{{ dateTime2.total }}</div>

              <span>当日销售量(个)</span>
            </el-col>
            <el-col :span="6">
              <div>{{ dateTime2.completedTotal }}</div>

              <span>当日销售量(个)</span>
            </el-col>
            <el-col :span="6">
              <div>{{ dateTime2.cancelTotal }}</div>

              <span>当日销售量(个)</span>
            </el-col>
            <el-col :span="6">
              <div>{{ dateTime2.workerCount }}</div>

              <span>当日销售量(个)</span>
            </el-col>
          </el-row>
        </div></el-col>
      </el-row>
      <!-- 内容部分 -->
      <div class="content">
        <!-- 左边 -->
        <div class="boxLeft">
          <div class="leftTitle">
            <div class="sonLeft">工单状态</div>
            <div class="sonRight">
              <el-row>
                <el-col :span="12">
                  <el-date-picker
                    v-model="dataValue"
                    style="width:240px;height:36px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-col>

                <el-col :span="12">
                  <div class="btn">
                    <a v-for="(item,index) in time" :key="index" :class="{decide:num === index}" @click="decide(index)">{{ item }}</a>
                  </div>

                </el-col>
              </el-row>
            </div>
          </div>
          <img src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="">
        </div>
        <!-- 右边 -->
        <div class="boxRight">
          <div class="rTitle">
            <div>人效排名（月度）</div>
            <div>
              <el-select v-model="region" placeholder="全部" style="width:80px" @change="change">
                <el-option v-for="item in listArea" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
          </div>

          <div class="btn" style="width:200px;margin-left:118px">
            <a :class="{decide:nums === 0}" style="width:70px" @click="select(0)">运营人员</a>
            <a :class="{decide:nums === 1}" style="width:70px" @click="select(1)">运维人员</a>
          </div>
          <div v-if="run.length>=1" style="margin-top:30px">
            <el-row v-for="(item,index) in run" :key="index">
              <el-col :span="6">
                <div class="bgi">{{ index+1 }}</div>
              </el-col>
              <el-col :span="15">{{ item.userName }}</el-col>
              <el-col :span="3">{{ item.workCount }}单<div class="grid-content bg-purple" /></el-col>
            </el-row>
          </div>
          <img v-else class="ppp" src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { areaList, rankingTop, headInformation } from '@/api'
export default {
  data() {
    return {
      time: ['周', '月', '年'],
      num: 0,
      nums: 0,
      dataValue: [`${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate() - new Date().getDay()}`, moment(new Date()).format('YYYY-MM-DD')],
      region: '',
      dateTime1: {},
      dateTime2: {},
      start: `2022-${new Date().getMonth() + 1}-01`,
      end: moment(new Date()).format('YYYY-MM-DD'),
      isRepair: false,
      listArea: [],
      run: []
    }
  },
  async created() {
    const res = await headInformation(moment(new Date()).format('YYYY-MM-DD') + '%2000:00:00', moment(new Date()).format('YYYY-MM-DD' + ' HH:mm:ss'))
    console.log(res)
    this.dateTime1 = res.data[0]
    this.dateTime2 = res.data[1]
    const { data } = await areaList({ pageIndex: 1, pageSize: 10000 })
    this.listArea = data.currentPageRecords
    this.fun(0)
  },
  methods: {
    change() {
      // this.region
      console.log(this.region)
      this.fun(this.region)
    },
    select(i) {
      this.nums = i
      if (i === 0) {
        this.isRepair = false
        this.fun(0)
      } else {
        this.isRepair = true
        this.fun(0)
      }
    },
    async fun(regionId) {
      const res = await rankingTop(this.start, this.end, this.isRepair, regionId)
      this.run = res.data
      console.log(res)
    },
    decide(i) {
      this.num = i
      if (i === 0) {
        this.dataValue = [`${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate() - new Date().getDay()}`, moment(new Date()).format('YYYY-MM-DD')]
      } else if (i === 1) {
        this.dataValue = [`2022-${new Date().getMonth() + 1}-01`, moment(new Date()).format('YYYY-MM-DD')]
      } else {
        this.dataValue = [`${new Date().getFullYear()}-01-01`, moment(new Date()).format('YYYY-MM-DD')]
      }
    }

  }
}

</script>
<style lang="scss" scoped>
.ppp{
  margin-top: 150px;
  margin-left: 140px;
}
.bgi{
      width: 21px;
    height: 20px;
    background: url('');
    color: #8e5900;
    text-align: center;
    line-height: 20px;
}
.bigBox{
   .body{
    padding: 20px;
    margin-top: 20px;
    background-color: #fff;
  }
  padding: 20px;
  .left{
    // background-color: #e9f3ff;
    min-height: 166px;
    height: calc(25vh - 30px);
    border-radius: 20px;
    background: #e9f3ff;
    background-image: url(''),url(http://likede2-admin.itheima.net/img/day.4272ef60.png);
    background-repeat: no-repeat,no-repeat;
    background-position: 0 0,calc(100% - 12px) 100%;
    padding: 20px;
    margin-right: 20px;;
  }
  .right{
      // background-color: #e9f3ff;
    min-height: 166px;
    height: calc(25vh - 30px);
    border-radius: 20px;
    // background: #e9f3ff;
    // background-repeat: no-repeat,no-repeat;
    background: #fbefe8 url(http://likede2-admin.itheima.net/img/month.5c71f45f.png) no-repeat calc(100% - 12px) 100%;
    // background-position: 0 0,calc(100% - 12px) 100%;
    padding: 20px;
  }
}
.yue{

    margin-left: 60px;
  div{
    color: #ff5757;
        text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
            height: 50px;
    font-size: 36px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    line-height: 50px;
  }
  span{
    height: 17px;
    margin-top: 3px;
    font-size: 12px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: #de9690;
    line-height: 17px;
  }
}
.ri{
  margin-left: 60px;
  div{
    color: #072074;
        text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
            height: 50px;
    font-size: 36px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    line-height: 50px;
  }
  span{
    height: 17px;
    margin-top: 3px;
    font-size: 12px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: #91a7dc;
    line-height: 17px;
  }
}
.content{
  display: flex;
    justify-content: space-between;
  margin-top: 20px;
    height: 550px;

      .boxLeft{
    // display: flex;
    // justify-content: space-between;
    // display: inline-block;
    border-radius: 20px;
    padding: 15px;
    height: 550px;
    width: 1260px;
    background-color: #fff;
    margin-right: 20px;
      text-align: center;
    img {
      line-height: 200px;
      display: inline-block;
      margin-top: 165px;
    }
  }
  .boxRight {

    // display: inline-block;
    border-radius: 20px;
    padding: 20px;
    height: 550px;
    background-color: #fff;
    width: 470px;
    .rTitle{
    display: flex;
    justify-content: space-between;
    }
  }
}
  .leftTitle{
    padding: 10px;
    width: 1200px;
     display: flex;
    justify-content: space-between;

    }
        .btn {
      line-height: 34px;
      text-align: center;
      border-radius: 10px;
      display: inline-block;
      width: 129px;
      margin-left: 30px;
      height: 34px;
      background-color: #f7fbff;
      a {
        display: inline-block;
        width: 30px;
      }
}
.sonLeft{
  // float: left;

}
.sonRight{
  // float: right;

}
.decide{
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    border-radius: 7px;
    font-weight: 600;
    color: #333;
}
</style>
